<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>结算</h1>
    <ul>
    </ul>
    <h1>总价:<span class="jie"></span><button onclick="account()">结算</button></h1>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <script>
        var a=localStorage.getItem('1')
        var b=JSON.parse(a)
        console.log(b);
        function xuan(){
            $("ul").html('')
            b.forEach(item => {
                     $("ul").append(`
                  <li>
                        <img src="${item.img}" alt="">
                    名字：${item.name}
                    价格：${item.Price}<button onclick="jian(${item.id})">-</button>
                <span>${item.quantity}</span><button onclick="jia(${item.id})">+</button>
                <button onclick="shan(${item.id})">删除</button></li>`)
            });
        }
        xuan()
                    //++
        function jia(id){
            // var zong=0
            var a=b.find(item=>item.id==id)
            a.quantity++
           fun()
            xuan()
        }
        //--
        function jian(id){
            var a=b.find(item=>item.id==id)
            // var zong=0
           if( a.quantity>0){
            a.quantity--
            // zong+=item.Price*item.quantity
          fun()
               xuan()
           }
        }
        function fun(){
            var zong=0
            b.forEach(item=>{
            zong+=item.Price*item.quantity
            })
            console.log(zong);
            $(".jie").html('')
            $('.jie').append(`${zong}`)
        }
        fun()
        function account(){
            alert('结算成功')
        }
    </script>
</body>
</html>